<style scoped>
    @import '../styles/group.css';
</style>
<template>
    <header-component keep-alive :page-name="pageName"></header-component>
    <ul class="groupRecord_header">
        <li :class="[tab==0?'red':'']" @click="tab=0"><a href="javascript:;" data-tabhref="?c=grouprecord"><span>全部</span></a> </li>
        <li :class="[tab==1?'red':'']" @click="tab=1"><a href="javascript:;" data-tabhref="?c=grouprecord&amp;tab=1"><span>待成团</span></a> </li>
        <li :class="[tab==2?'red':'']" @click="tab=2"><a href="javascript:;" data-tabhref="?c=grouprecord&amp;tab=2"><span>已成团</span></a> </li>
        <li :class="[tab==3?'red':'']" @click="tab=3"><a href="javascript:;" data-tabhref="?c=grouprecord&amp;tab=3"><span>拼团失败</span></a> </li>
    </ul>
    <div class="groupRecord_content" id="groupRecordList">
        <div class="groupRecord_item" v-for="(k,i) in data">
            <div class="groupRecord_title">订单编号：{{i.code}}</div>
            <div class="groupRecord_main">
                <div class="imgBox"><a href="javascript:;" data-href="?c=grouphome&id={{good_id}}" v-link="{path:'/groupHome',query:{id:i.good_id}}"><img :src="i.img_url"/></a> </div>
                <div class="main_info">
                    <p class="lineclamp"><a href="javascript:;" data-href="?c=grouphome&id={{good_id}}" v-link="{path:'/groupHome',query:{id:i.good_id}}">{{i.title}}</a></p>
                    <div class="groupRecord_status">
                        <span>{{i.group_num}}人团</span>
                        <span>￥<em>{{i.price}}</em></span>
                <span>
                    <template v-if="i.pt_status==1">
                        拼团中
                    </template>
                     <template v-if="i.pt_status==2">
                        拼团成功
                    </template>
                     <template v-if="i.pt_status==3">
                        拼团失败
                    </template>
                </span>
                    </div>
                </div>
            </div>
            <div class="groupRecord_time">
                <span>下单时间：{{i.createtime}}</span>

                <a v-if="i.pt_status==1" href="javascript:;" data-href="?c=grouppayback&g_id={{group_id}}&g_type={{group_type}}&o_code={{code}}" v-link="{path:'/groupPayback',query:{g_id:i.group_id,g_type:i.group_type,o_code:i.code}}" class="redBac">邀请好友拼团</a>

                <a v-else href="javascript:;" data-href="?c=grouppayback&g_id={{group_id}}&g_type={{group_type}}&o_code={{code}}&isInvite=1" class="greyBac" v-link="{path:'/groupPayback',query:{g_id:i.group_id,g_type:i.group_type,o_code:i.code,isInvite:1}}">查看团详情</a>

            </div>
        </div>
    </div>
    <div class="w-more" id="GroupRecordMore" v-el:group-record-more>
        <template v-if="!hasMore&&page!=0">
            没有更多了
        </template>

        <template v-if="hasMore">
            <b class="ico ico-loading"></b> 努力加载中
        </template>
        <template v-if="!hasMore&&page==0">
            暂无记录
        </template>
    </div>
</template>
<script>
    import headerComponent from '../components/header'
    import User from '../module/user'
    import pop from '../components/pop'
//    import Config from '../config/config'
    module.exports = {
        data() {
            return {

                data:[],

                page: 1,

                hasMore: true,
                loading: false,
                pageName:'拼团记录',
                tab:'0',
            }
        },
        components: {

            headerComponent

        },
        watch:{

            async tab(){

                this.page=1;

                this.hasMore=true;

                this.data.splice(0,this.data.length);

                await this.loadMore()

            }

        },
        created(){

            this.$dispatch('isLoading',true);

        },
        async ready() {

            if(!User.isLogin){

                this.$router.go({path:'/user/login'});

                return;

            }

            await this.loadMore();

            document.addEventListener('scroll',this.getMore,false);

            this.$dispatch('isLoading',false);

        },

        beforeDestroy() {

            document.removeEventListener('scroll',this.getMore,false);

        },
        methods: {

            async loadMore(){

                if (this.loading) {
                    return;
                }

                this.loading = true;

                let data=await User.getMyGroupList(this.page,this.tab);

                this.page++;

                if (data.status == 200 && !!data) {

                    let len=0;

                    this.data.push(...data.data);

                    if(data) len += data.data.length;

                    if(len<8) this.hasMore=false;

                }else if(this.page==0){

                    this.hasMore=false;

                }


                this.loading=false;

            },


            async getMore(){


                var pos = this.$els.groupRecordMore.getBoundingClientRect();


                console.log(window.innerHeight)

                console.log(this.hasMore)

                if (this.hasMore &&

                        ((pos.top+30> 0 && window.innerHeight - pos.top+30> 0) ||
                        (pos.top+30 <= 0 && pos.bottom >= 0))) {

                    await this.loadMore();

                }

            }
        }
    }
</script>
